import React from 'react'
import './Header.css'
import { Link,NavLink } from 'react-router-dom'

export const Header = () => {
    return (
        <div className="header-wrap">
            <div className="header">
                <img className="logo" src="//static2.cnodejs.org/public/images/cnodejs_light.svg" alt=""/>
                <div className="nav">
                    {/* <Link to="/">首页</Link>
                    <Link to='/new'>新手入门</Link>
                    <Link to='/login'>登录</Link>
                    <Link to='/zhangsan'>API</Link>*/}
                    {/* 第一个大括号代表表达式，第二个代表对象 */}
                    {/* <Link to={
                        {
                            pathname:'/lisi',
                            //!一般是对象 
                            state:{id:100}
                        }
                    }>李四</Link>  */}

                    {/*//! NavLink提供样式设置 */}
                    <NavLink exact activeStyle={{color:'red'}}  to="/">首页</NavLink>
                    <NavLink activeStyle={{color:'red'}}  to='/new'>新手入门</NavLink>
                    <NavLink activeStyle={{color:'red'}}  to='/login'>登录</NavLink>
                    <NavLink activeStyle={{color:'red'}}  to='/zhangsan'>API</NavLink>
                    {/* 第一个大括号代表表达式，第二个代表对象 */}
                    <NavLink activeStyle={{color:'red'}} to={{pathname:'/lisi',state:{id:100}}}>李四</NavLink>
                </div>
            </div>
        </div>
    )
}
